<template>
  <div class="container">
    <div class="top-container">
      <div class="top-left">
        <h2 style="font-size: 22px; color: #fff">小李的后台管理系统</h2>
        <el-icon
          @click="handleCollapse"
          size="20"
          color="#fff"
          style="margin-left: 8px"
        >
          <setting />
        </el-icon>
      </div>

      <el-dropdown @command="onCommand">
        <span class="el-icon--right">{{ username }}</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="goHome">首页</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="bottom-container">
      <div class="menu-container">
        <el-menu
          unique-opened
          background-color="rgb(50, 65, 87)"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          :default-openeds="['1', '3']"
          :collapse="isCollapse"
        >
          <el-menu-item index="/index">
            <!-- 一级菜单 -->
            <el-icon>
              <message />
              <i data-v-5eff1f1c="" class="iconfont homepage"></i>
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu
            v-for="item in storeMenus"
            :key="item.id"
            :index="item.name"
          >
            <!-- 一级菜单 -->
            <template #title>
              <el-icon>
                <i :class="`iconfont ${item.name}`"></i>
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item-group v-for="el in item.children" :key="el.id">
              <el-menu-item :index="'/' + item.name + '/' + el.name">{{
                el.title
              }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="main-container" style="background-color: #eee">
        <RouterView />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from "vue";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import { useMenusStroe } from "../stores/menus";
import { useUserInfoStore } from "../stores/userInfo";
import * as api from "../request/api";
import { useRouter, useRoute, RouterView } from "vue-router";
import Cookies from "js-cookie";

// 获取pinia的菜单栏数据
let menusStore = useMenusStroe();
let storeMenus = computed(() => {
  return menusStore.sortedMenus;
});
// console.log("storeMenus",storeMenus);

let username = ref("");
const userInfoStore = useUserInfoStore();
username.value = userInfoStore.username;
// console.log(menusStore);

// 菜单栏折叠
let isCollapse = ref(false);
let handleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

// 默认的高亮菜单
let defaultActive = ref("/index");
// 我应该从 路由跳转 ，判断当前是在哪一个页面，从而知道菜单栏的子菜单应该谁要高亮
watch(
  useRoute(), // 类似于vue2 的 this.$route
  (newVal) => {
    // console.log(newVal);
    defaultActive.value = newVal.path;
    // console.log(newVal.meta.parentPath);
  },
  {
    immediate: true,
  }
);

// 下拉菜单的单机事件
const router = useRouter();
let onCommand = (command: string | number | object) => {
  // console.log(command);
  if (command === "goHome") {
    router.push("/index");
  } else if (command === "logout") {
    // 清空menus
    menusStore.updateMenus([]); // 根据我们前置守卫的逻辑 , 需要清空菜单栏数据，才会重新获取个人用户信息
    userInfoStore.updataUserInfo("", []);
    console.log("退出登录i");
    // 清空token
    Cookies.remove("token"); // 不删除 token  无法条找的登录页面

    // 删除路由记录
    // const allRouters = router.getRoutes()
    // console.log(allRouters);

    // allRouters.forEach( (el) => {
    //     if(el.name !== 'index' && el.name !== 'login' && el.name !== 'home'){
    //         router.removeRoute(el.name)
    //     }
    // })

    // 回到login页面
    router.push("/login");
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .top-container {
    height: 70px;
    background-color: #409eff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;

    .top-left {
      display: flex;
    }

    .el-icon--right {
      color: #fff;
    }
  }

  .bottom-container {
    display: flex;
    flex: 1;
    overflow: hidden;

    .menu-container {
      height: 100%;
      overflow-y: auto;
      color: #dfd9d9;
      text-align: center;

      &::-webkit-scrollbar {
        width: 0;
      }

      .el-menu {
        height: 100%;
      }

      // .el-menu--vertical
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 250px;
      }
    }

    .main-container {
      flex: 1;
      overflow-y: auto;
      /* padding: 20px; */
      background-color: #fff !important;
    }
  }
}

//菜单栏图标icon
@font-face {
  font-family: iconfont;
  src: url(//at.alicdn.com/t/font_2552676_si9vg16xca.woff2?t=1621236565779)
      format("woff2"),
    url(//at.alicdn.com/t/font_2552676_si9vg16xca.woff?t=1621236565779)
      format("woff"),
    url(//at.alicdn.com/t/font_2552676_si9vg16xca.ttf?t=1621236565779)
      format("truetype");
}

.iconfont {
  font-family: iconfont !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  color: #fff !important;
}

.homepage:before {
  content: "\e620";
  margin-right: 20px;
}

.pms:before {
  content: "\e64f";
  margin-right: 20px;
}

.product-list:before {
  content: "\e629";
  margin-right: 20px;
}

.product-add:before {
  content: "\e64e";
  margin-right: 20px;
}

.product-cate:before {
  content: "\e724";
  margin-right: 20px;
}

.product-attr:before {
  content: "\e64d";
  margin-right: 20px;
}

.product-brand:before {
  content: "\e7b8";
  margin-right: 20px;
}

.oms:before {
  content: "\e63a";
  margin-right: 20px;
}

.order-setting:before {
  content: "\e606";
  margin-right: 20px;
}

.order-return:before {
  content: "\e607";
  margin-right: 20px;
}

.order-return-reason:before {
  content: "\e612";
  margin-right: 20px;
}

.sms:before {
  content: "\e604";
  margin-right: 20px;
}

.sms-flash:before {
  content: "\e653";
  margin-right: 20px;
}

.sms-coupon:before {
  content: "\e635";
  margin-right: 20px;
}

.sms-new:before {
  content: "\e60e";
  margin-right: 20px;
}

.sms-hot:before {
  content: "\e609";
  margin-right: 20px;
}

.sms-subject:before {
  content: "\e62a";
  margin-right: 20px;
}

.sms-ad:before {
  content: "\e61d";
  margin-right: 20px;
}

.ums:before {
  content: "\e656";
  margin-right: 20px;
}

.ums-admin:before {
  content: "\e817";
  margin-right: 20px;
}

.ums-role:before {
  content: "\e62d";
  margin-right: 20px;
}

.ums-menu:before {
  content: "\e652";
  margin-right: 20px;
}

.ums-resource:before {
  content: "\e6ba";
  margin-right: 20px;
}
</style>
